<script setup lang="ts">
// Table表格
const tableData = [
    {
        id: '01',
        name: '欧式大床',
        sort:'床',
        band:'百世经典',
        img:'xxx',
        address: 'No. 189, Grove St, Los Angeles',
    }
]
// Form表单
import { reactive } from 'vue'

const formInline = reactive({
    user: '',
    region: '',
    date: '',
})

const onSubmit = () => {
    console.log('submit!')
}
</script>

<template>
    <div >
        <div class="search" style="display: flex; ">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="家具名称">
                    <el-input v-model="formInline.user" placeholder="请输入..." clearable />
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="家具分类">
                    <el-input v-model="formInline.user" placeholder="请输入..." clearable />
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="家具品牌">
                    <el-input v-model="formInline.user" placeholder="请输入..." clearable />
                </el-form-item>
            </el-form>
           
            <div class="mb-4">
                <el-button>查询</el-button>
                <el-button type="primary">添加</el-button>
            </div>
        </div>
        <!-- Table表格 -->
        <div class="Table">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="Id" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="sort" label="Sort" width="180" />
                <el-table-column prop="band" label="Band" width="180" />
                <el-table-column prop="img" label="Img" width="180" />
                <el-table-column prop="address" label="Address" />
            </el-table>
        </div>
        <div class="pagination">
            <el-pagination size="large" layout="prev, pager, next" :total="200" />

        </div>


    </div>


</template>

<style scoped>
.search{
    display: flex;
    padding: 30px;
}
.Table {
    width: 100%;
    /* border: red solid 1px; */
    height: 60vh;
    box-sizing: border-box; 
    margin: 20px;
    /* height: 85vh; */
}

.pagination {
    display: flex;
    justify-content: end;

    /* align-items: center;
    flex-direction: column; */
}

.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>
